<template>
  <div class="admin">
    <el-input type="text" placeholder="请输入搜索内容" v-model="name"></el-input>
    <el-button @click="onSearch">搜索</el-button>
    <el-button @click="onAddUser">添加</el-button>
    <el-table :border="true" :data="tableData" style="width: 100%;">
      <el-table-column prop="id" label="编号" width="50" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="nickName" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column label="添加时间" width="170">
        <template #default="scoped">
          {{ scoped.row.createTime ? dayjs(scoped.row.createTime).format("YYYY-MM-DD HH:mm:ss"): "/" }}
        </template>
      </el-table-column>
      <el-table-column label="最后登录" width="170">
        <template #default="scoped">
          {{ scoped.row.loginTime ? dayjs(scoped.row.loginTime).format("YYYY-MM-DD HH:mm:ss") : "/" }}
        </template>
      </el-table-column>
      <el-table-column label="是否启用" width="125">
        <template #default="scoped">
          <el-switch :model-value="scoped.row.status===1?true:false" @change="onChange(scoped.row)" />
          <!-- :model-value="scoped.row.status===1?true:false" -->
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="scoped">
          <el-button type="primary" link>分配角色</el-button>
          <el-button type="primary" link @click="onEdit(scoped.row)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
      :page-sizes="[1, 5, 10, 20]" :small="true" layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <Edit @cancel="onCloseDialog" @confirm="onConfirmDialog" :visible="visible" :form="form" />




</template>
<script setup lang="ts">
import Edit from "./Edit.vue"
import * as api from "@/request/api";
// import type { IAdminListItem } from "@/request/UmsAdminConstroller/index"
import dayjs from "dayjs";
import useTable from "@/hooks/useTable"
import { ref, type Ref } from "vue";
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'
import { ElMessage, ElMessageBox } from 'element-plus'

// import { ref, type Ref } from "vue";


const name = ref("");


const { pagination, tableData, handleSizeChange, handleCurrentChange, getTableData } = useTable(api.admin.getAdminList, {
  // keyword: name.value// 只传了初始值，因为name.value不是响应式数据。
  // 因此传入name Ref类型
  keyword: name,
  pageNum: 6,
  pageSize: 20
});

// 【】搜索
const onSearch = () => {
  getTableData();
}

// v-model 绑定 name
// 点击搜索时 调取 useTable传来的 设置表格数据的方法。
// useTable 需要传入响应式的参数
// 在useTable里将响应式参数转为普通值。再发送请求



// 【】控制dialog显示隐藏

const visible = ref(false);

const onCloseDialog = () => {
  visible.value = false;

};

const onConfirmDialog = (row: IAdminListItem) => {
  visible.value = false;
  console.log();



  // 弹出提示框
  ElMessageBox.confirm(
    `此操作将${isAdd.value ? "添加新用户" : "修改当前用户信息"}, 是否继续?`,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (isAdd.value) {
        await api.admin.adminRegister(row);
        isAdd.value = false;
      }
      else {
        await api.admin.adminUpdate(row);
      }

      ElMessage({
        type: 'success',
        message: isAdd.value ? '已成功添加' : '修改成功',
      })

      // 远程修改用户信息
      // 再从新请求更新表格
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '你已取消',
      })
    })



};



// 【】父传子传form信息
//需要写成响应式，在Edit传值的时候，不仅传初始值，也要根据点击编辑的那项传表单。
// A 定义了form的初始值
const form = ref({}) as Ref<IAdminListItem>;
const onEdit = (row: IAdminListItem) => {

  visible.value = true;
  // B 修改了form的value值
  form.value = row;
  // form.value.nickName = "1121";
}


// 【】是否启用/修改状态信息
const onChange = async (row: IAdminListItem) => {
  console.log("onChange");
  let id = row.id;
  // 如果 原状态值为0则 status为1 ，反之亦然。
  let status: 0 | 1 = (row.status === 0) ? 1 : 0;

  let result = await api.admin.adminUpdateStatus({ id, status });
  // if (result === 1) {
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  // form.value = row;
  // form.value.status = status;
  row.status = status;
  // form.value.status 发生改变
}


// 【】添加新用户
const isAdd = ref(false);//不写成响应式也可。
const onAddUser = () => {
  // 传一个个属性初始值为空的对象
  const newUser = {
    "email": "",
    "icon": "",
    "nickName": "",
    "note": "",
    "password": "",
    "username": "",
  }
  // 准备传给子级对话框
  // 使用类型断言
  form.value = newUser as IAdminListItem;
  isAdd.value = true;//打开 添加用户 开关
  visible.value = true;
}






// 【】泛型约束
// 想要useTable 的第二个参数有类型约束。传错误参数应该会报错
// 想要useTable 的各个返回值可以用 “.” 点出内部属性。
// 因此需要对usetable做类型约束。
// tableData.value[0].a





</script>

<style scoped lang="scss">
.admin {
  margin-top: 60px;
  padding: 20px;
}

:deep(.el-table) {
  font-size: 12px;

  .cell {
    text-align: center;
  }
}
</style>